<template>
  <!--联系人-->
  <div class="contact">

    <!--联系人界面分级和搜素-->
    <div>
      <span style="padding: 0px 10px">
        <i class="el-icon-s-check"></i>
      </span>
      <el-select v-model="allValue" value-key="id" @change="initData(currPage,pageSize,allValue.value,1)" placeholder="请选择" style="width: 145px">
        <el-option-group v-for="group in allOptions" :key="group.label"
                         :label="group.label">
          <el-option v-for="item in group.options" :key="item.value"
                     :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>

      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-s-promotion"></i></span>
      <el-input v-model="searchValue" clearable placeholder="请输入联系人关键字" clearable style="width: 190px"></el-input>
      <el-button @click="initData(currPage,pageSize,searchValue,2)" icon="el-icon-search" size="small" circle></el-button>
    </div>
    <!--联系人主表信息及新增按钮-->
    <div>
      <el-row style="margin-top: 15px">
        <el-row>
          <el-col :span="12" >
            <span set-lan="html:联系人基本信息">联系人基本信息</span>
            <small class="text-muted font-13">共{{totalSize}}条</small>
          </el-col>
          <el-col :span="24">
            <el-button type="text" @click="exportExcel">
              <el-button size="small" icon="el-icon-top-left">联系人信息Excel导出</el-button>
            </el-button>
            <el-button type="text" @click="handleWindowPrint('#outTableContact', '联系人信息打印')">
              <el-button size="small" icon="el-icon-printer">联系人信息打印</el-button>
            </el-button>
            <el-button type="text" @click="dialogFormVisible = true" class="text-right">
              <el-button size="small" icon="el-icon-circle-plus-outline">新增联系人</el-button>
            </el-button>
          </el-col>
        </el-row>
      </el-row>
      <!--新增联系人Dialog-->
      <el-dialog  @close="closeDialog('con')"  :visible.sync="dialogFormVisible" width="60%" style="color: #333333;"  >
        <el-form :model="contact" :rules="rules" ref="con" label-width="100px">
          <el-row style="text-align: left">
            <span style="font-size: 28px">联系人</span>
          </el-row>
          <el-divider>联系人</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="contactName" label="姓名:" style="width: 90%" >
                <el-input v-model="contact.contactName" placeholder="联系人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="contactPhone" label="电话:" style="width: 90%">
                <el-input v-model="contact.contactPhone" placeholder="手机号码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
                  <el-col :span="24">
                    <el-form-item prop="customerByCustomerId" label="对应客户:"  style="width: 95%">
                      <el-input :disabled="true" v-model="contact.customerByCustomerId.customerName" placeholder=""></el-input>
                    </el-form-item>
                    <div class="form-inline" v-show="isCus">
                      <el-input v-model="cusValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 35%"></el-input>
                      <el-tooltip class="item" effect="dark" content="搜索客户" placement="bottom">
                        <el-button @click="findCus" size="medium" icon="el-icon-search"></el-button>
                      </el-tooltip>
                      <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{cusValue}}</span>
                    <span @click="nullFocus" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="cusList !== ''">
                    <li @click="choiceCus(item)" v-for="item in cusList">客户名称：{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="cusList == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
            <!--内层dialog-->
            <el-dialog width="30%" title="全部客户" :visible.sync="innerDialog" append-to-body>
              <!--选择客户-->
              <el-table :data="cusList" style="width: 100%">
                <el-table-column prop="customerId" label="客户编号" >
                </el-table-column>
                <el-table-column prop="customerName" label="客户名称" >
                </el-table-column>
                <el-table-column prop="customerSimplename" label="客户简称" >
                </el-table-column>
                <el-table-column label="请选择" >
                  <template slot-scope="scope">
                    <el-button size="mini" @click="choiceCus(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-row style="margin-top:10px">
                <el-col :span="16">
                  <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                                 :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
                </el-col>
              </el-row>
            </el-dialog>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="contactType" label="联系人分类:" style="width: 90%">
                <el-select v-model="contact.contactType" placeholder="请选择联系人分类类型" style="width: 100%">
                  <el-option
                    v-for="(item,index) in contactType"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="contactSex" label="性别:" style="width: 90%">
                <el-select v-model="contact.contactSex" placeholder="请选择联系人性别" style="width: 100%">
                  <el-option
                    v-for="(item,index) in contactSex"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="contactAddress" label="地址:" style="width: 90%">
                <el-input v-model="contact.contactAddress" placeholder="地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址:" style="width: 95%">
                <el-input v-model="contact.contactDetailAaddress" placeholder="详细地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" style="width: 95%;">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="contact.contactTip"
                  style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>单位</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="称谓:" style="width: 90%">
                <el-input v-model="contact.contactBusiness" placeholder="工作称谓"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="contactContacttype" label="类型:" style="width: 90%">
                <el-select v-model="contact.contactContacttype" placeholder="请选择联系人类型" style="width: 100%">
                  <el-option
                    v-for="(item,index) in contactContacttype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门:" style="width: 90%">
                <el-input v-model="contact.contactDept" placeholder="部门名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职务:" style="width: 90%">
                <el-input v-model="contact.contactDuty" placeholder="主要职务"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>网络联系方式</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="微信:" style="width: 90%">
                <el-input v-model="contact.contactWechat" placeholder="微信账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ:" style="width: 90%">
                <el-input v-model="contact.contactQq" placeholder="QQ账号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="微信名称:" style="width: 90%">
                <el-input v-model="contact.contactWechatname" placeholder="微信名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ名称:" style="width: 90%">
                <el-input v-model="contact.contactQqname" placeholder="QQ名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="8">
              <el-form-item>
                <el-button @click="addNewContact()" type="primary">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

      <!--联系人主表-->
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-table
            id="outTableContact"
            ref="multipleTable"
            :data="contactList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="contactId"
              label="ID"
              width="70px">
            </el-table-column>
            <el-table-column
              prop="contactName"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="contactPhone"
              label="电话">
            </el-table-column>
            <el-table-column
              prop="contactSex"
              label="性别">
            </el-table-column>
            <el-table-column
              prop="contactAddress"
              label="地址">
            </el-table-column>
            <el-table-column
              prop="customerByCustomerId.customerName"
              label="对应客户"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <router-link :to="{path:'/customerView',query: {customerId: scope.row.customerByCustomerId.customerId}}">
                    <span style="color: #333333">
                      <span class="routerHover">{{scope.row.customerByCustomerId.customerName}}</span>
                    </span>
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="contactType"
              label="分类"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.contactType == 1">{{contactType[0].label}}</span>
                <span v-if="scope.row.contactType == 2">{{contactType[1].label}}</span>
                <span v-if="scope.row.contactType == 3">{{contactType[2].label}}</span>
                <span v-if="scope.row.contactType == 4">{{contactType[3].label}}</span>
                <span v-if="scope.row.contactType == 5">{{contactType[4].label}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="110px">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑">
                  <el-button size="mini" @click="handleEdit(scope.row)"
                             icon="el-icon-edit" type="primary" circle></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                  <el-button size="mini" @click="handleDelete(scope.row)"
                             icon="el-icon-delete" type="danger" circle></el-button>
                </el-tooltip>
              </template>z
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 分页 -->
        <el-row style="margin-top:20px">
          <el-col :span="24" style="text-align: center">
            <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                           :current-page.sync="currPage" :page-size="pageSize"></el-pagination>
          </el-col>
        </el-row>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import XLSX from "xlsx";
import FileSaver from "file-saver";

export default {
  data() {
    return{
      //表单验证
      rules: {
        contactName: [
          { required: true,message: '请输入联系人名称', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true,message: '请输入联系人电话', trigger: 'blur' },
          { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
        ],
        contactType: [
          { required: true, message: '请选择联系人分类类型', trigger: 'blur' }
        ],
        contactSex: [
          { required: true,message: '请选择联系人性别', trigger: 'blur' }
        ],
        customerByCustomerId: [
          { required: true, message: '请选择对应客户', trigger: 'blur' }
        ],
        contactContacttype: [
          { required: true,message: '请选择联系人类型', trigger: 'blur' }
        ]
      },
      allValue: '',
      searchValue: '',
      pageSize: 10, //分页页大小
      currPage: 1, //当前页码，默认为1
      totalSize: 0, //总记录数
      dialogFormVisible: false,
      contact: {
        contactId: 0,//联系人编号
        contactName: '',//联系人姓名
        contactPhone: '',//联系人电话
        contactType: '',//联系人分类
        contactSex:  '',//性别
        contactBusiness: '',//联系人工作
        contactContacttype: '',
        contactDept: '',//部门
        contactDuty: '',//职责
        contactQq: '',//QQ
        contactQqname: '',//QQ名称
        contactWechat: '',//微信
        contactWechatname: '',//微信名称
        contactAddress: '',//地址
        contactTip: '',//备注
        contactDetailAaddress: '',//详细地址
        customerByCustomerId: {},//对应客户
      },
      contactList: [],
      allOptions: [{
        label: '全部数据',
        options: [{
          id: 'qbsj',
          value: '',
          label: '全部数据'
        }]
      }, {
        label: '分类',
        options: [{
          parentLabel: '分类',
          id: 'tbzy',
          value: 'tbzy',
          label: '特别重要'
        }, {
          parentLabel: '分类',
          id: 'zy',
          value: 'zy',
          label: '重要'
        }, {
          parentLabel: '分类',
          id: 'pt',
          value: 'pt',
          label: '普通'
        }, {
          parentLabel: '分类',
          id: 'bzy',
          value: 'bzy',
          label: '不重要'
        }, {
          parentLabel: '分类',
          id: 'sx',
          value: 'sx',
          label: '失效'
        }]
      }],
      contactType: [{
        value: 1,
        label: '特别重要'
      }, {
        value: 2,
        label: '重要'
      }, {
        value: 3,
        label: '普通'
      }, {
        value: 4,
        label: '不重要'
      }, {
        value: 5,
        label: '失效'
      }],
      contactSex: [{
        value: '男',
        label: '男'
      },{
        value: '女',
        label: '女'
      }],
      contactContacttype: [{
        value: '主联系人',
        label: '主联系人'
      },{
        value: '联系人',
        label: '联系人'
      }],
      cusList: [],
      isCus: true,
      cusValue: '',
      visible: false,
      cusCurrPage: 1,
      cusPageSize: 6,
      cusTotalSize: 0,
      innerDialog:false,
      content: '',
      initDateIndex: 1,
      contentValue: 0,


    }
  },
  methods: {
    initData(currPage,pageSize,content,initDateIndex){
      if(initDateIndex == 1){
        if(content == ''){
          this.content = '';
          this.$axios.get("http://localhost:8088/contact-all-list", {
            params: {
              page: currPage,
              size: pageSize,
            }
          })
            .then(v => {
              console.log(v.data.rows)
              this.contactList = v.data.rows;
              this.totalSize = v.data.total;
              console.log(this.totalSize)
              console.log(this.contactList)
            })
            .catch(function(v) {})
        }else{
          if(content == 'tbzy' || content == 'zy' || content == 'pt' || content == 'bzy' || content == 'sx'){
            switch (content) {
              case 'tbzy':this.contentValue = 1;this.content = 'tbzy'; break;
              case 'zy':this.contentValue = 2;this.content = 'zy'; break;
              case 'pt':this.contentValue = 3;this.content = 'pt'; break;
              case 'bzy':this.contentValue = 4;this.content = 'bzy'; break;
              case 'sx':this.contentValue = 5;this.content = 'sx'; break;
            }
            this.$axios.get('http://localhost:8088/contact-type-list',{
              params: {
                contactType: this.contentValue,
                page: this.currPage,
                size: this.pageSize,
              }
            }).then(v=>{
              this.contactList = v.data.rows
              this.totalSize = v.data.total
            }).catch(function (v) {})
          }
        }
      }
      if(initDateIndex == 2){
        if(content == ''){
          this.$message({
            type: 'warning',
            message: '搜索内容不能为空！'
          })
        }else{
          this.content = content;
          this.$axios.get('http://localhost:8088/contact-search-list', {
            params: {
              page: this.currPage,
              size: this.pageSize,
              searchValue: this.content,
            }
          })
            .then(v => {
              this.contactList = v.data.rows
              this.totalSize = v.data.total
            })
            .catch(function (v) {})
        }
      }
    },
    changePage(val) {
      //val就是当前页码
      this.initData(val, this.pageSize,this.content,this.initDateIndex);
    },
    // 打开内层dialog
    innerVisible (cusCurrPage,cusPageSize) {
      this.$axios.get('http://localhost:8088/customer-list', {
        params: {
          page: cusCurrPage,
          size: cusPageSize,
        }
      })
        .then(v => {
          this.cusList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {})
      this.innerDialog = true
    },
    //内层分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 模糊查询员工
    findCus(){
      if (this.cusValue != ''){
        this.visible = true
        this.$axios.get('http://localhost:8088/customer-search-list', {
          params: {
            page: 1,
            size: 99,
            searchValue: this.cusValue
          }
        })
          .then(v => {
            this.cusList = v.data.rows
          })
          .catch(function (v) {})
      }else {
        this.visible = false
      }
    },
    // 模糊选择客户
    choiceCus(val){
      this.contact.customerByCustomerId = val
      this.visible = false
      this.innerDialog = false;
    },
    // 失去焦点关闭模糊搜索框
    nullFocus(){
      this.visible = false
    },
    closeDialog(formName){
      this.$refs[formName].resetFields();
      this.contact = {
        contactId: 0,//联系人编号
        contactName: '',//联系人姓名
        contactPhone: '',//联系人电话
        contactType: '',//联系人分类
        contactSex:  '',//性别
        contactBusiness: '',//联系人工作
        contactContacttype: '',
        contactDept: '',//部门
        contactDuty: '',//职责
        contactQq: '',//QQ
        contactQqname: '',//QQ名称
        contactWechat: '',//微信
        contactWechatname: '',//微信名称
        contactAddress: '',//地址
        contactTip: '',//备注
        contactDetailAaddress: '',//详细地址
        customerByCustomerId: {},//对应客户
      }
    },
    handleEdit(val){
      this.dialogFormVisible = true;
      this.contact = val;
      this.contact.contactId = val.contactId;
      this.contact.contactName = val.contactName;
      this.contact.contactPhone = val.contactPhone;
      this.contact.contactType = val.contactType;
      this.contact.contactSex = val.contactSex;
      this.contact.contactBusiness = val.contactBusiness;
      this.contact.contactContacttype = val.contactContacttype;
      this.contact.contactDept = val.contactDept;
      this.contact.contactDuty = val.contactDuty;
      this.contact.contactQq = val.contactQq;
      this.contact.contactQqname = val.contactQqname;
      this.contact.contactWechat = val.contactWechat;
      this.contact.contactWechatname = val.contactWechatname;
      this.contact.contactAddress = val.contactAddress;
      this.contact.contactTip = val.contactTip;
      this.contact.customerHttp = val.customerHttp;
      this.contact.contactDetailAaddress = val.contactDetailAaddress;
      this.contact.customerByCustomerId = val.customerByCustomerId;
    },
    //添加或更新联系人数据
    addNewContact(){
      this.$refs.con.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/add-contact',this.contact)
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize,'',1)
              // 2、关闭弹框
              this.dialogFormVisible = false
              // 3、重新初始化表单数据模型
              this.contact = {
                contactId: 0,//联系人编号
                contactName: '',//联系人姓名
                contactPhone: '',//联系人电话
                contactType: '',//联系人分类
                contactSex:  '',//性别
                contactBusiness: '',//联系人工作
                contactContacttype: '',
                contactDept: '',//部门
                contactDuty: '',//职责
                contactQq: '',//QQ
                contactQqname: '',//QQ名称
                contactWechat: '',//微信
                contactWechatname: '',//微信名称
                contactAddress: '',//地址
                contactTip: '',//备注
                contactDetailAaddress: '',//详细地址
                customerByCustomerId: {},//对应客户
              }
            })
            .catch(function (v) {})
          this.$message({
            type: 'success',
            message: '已保存!'
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // pdf打印
    handleWindowPrint (ele, fileName) {
      // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
      document.head.innerHTML = '<meta charset="utf-8">\n' +
        ' <title> ' + fileName + '</title>\n' +
        ' <meta name="format-detection" content="telephone=no">\n' +
        ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
        ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
        ' <link rel="stylesheet" href="./static/css/contract.css"/>'
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    //导出excel
    exportExcel () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTableContact"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "联系人信息表格.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

  },
  created() {
    this.initData(this.currPage, this.pageSize,this.content,this.initDateIndex);
  },
  mounted() {

  }
}
</script>
<style>
  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }


  .text-muted {
    color: #98a6ad;
  }

  .font-13 {
    font-size: 13px !important;
  }

  .text-right {
    text-align: right;
    float: right;
  }

  .form-inline {
    position: relative;
    top: -5px;
    left: 100px;
  }
  .cu-ul{
    padding-left: 10px;
    margin: 0;
  }
  .cu-ul li{
    font-weight: bold;
    list-style-type:none;
    cursor:pointer;
    margin-bottom: 10px;
  }
  .cu-ul li:hover{
    color: #23527c;
  }
</style>
